<template>
  <view class="register-container">
    <view class="register-content">
      <view class="register-form">
        <view class="title">知医小程序注册</view>
        
        <view class="form-item">
          <input 
            type="text"
            v-model="registerForm.username"
            placeholder="请输入账号"
            maxlength="20"
          />
        </view>
        
        <view class="form-item">
          <input 
            type="text"
            v-model="registerForm.nickName"
            placeholder="请输入昵称"
            maxlength="30"
          />
        </view>
        
        <view class="form-item">
          <input 
            type="text"
            v-model="registerForm.email"
            placeholder="请输入邮箱"
            maxlength="50"
          />
        </view>
        
        <view class="form-item">
          <input 
            type="number"
            v-model="registerForm.phonenumber"
            placeholder="请输入手机号码"
            maxlength="11"
          />
        </view>
        
        <view class="form-item">
          <picker 
            mode="selector" 
            :range="sexOptions" 
            range-key="label"
            @change="handleSexChange"
          >
            <view class="picker">
              {{ sexOptions[registerForm.sex].label || '请选择性别' }}
            </view>
          </picker>
        </view>
        
        <view class="form-item">
          <input 
            type="password"
            v-model="registerForm.password"
            placeholder="请输入密码"
            maxlength="20"
          />
        </view>
        
        <view class="form-item">
          <input 
            type="password"
            v-model="registerForm.confirmPassword"
            placeholder="请确认密码"
            maxlength="20"
          />
        </view>

        <view class="form-item captcha-group">
          <input 
            type="text"
            v-model="registerForm.code"
            placeholder="请输入验证码"
            maxlength="4"
            class="captcha-input"
          />
          <image 
            :src="captchaImg" 
            class="captcha-img" 
            @tap="getCaptcha" 
            mode="aspectFit"
          ></image>
        </view>
        
        <button class="register-btn" @tap="handleRegister" :loading="loading">
          {{ loading ? '注册中...' : '注册' }}
        </button>
        
        <view class="login-link" @tap="goToLogin">
          已有账号？立即登录
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      registerForm: {
        username: '',
        password: '',
        confirmPassword: '',
        nickName: '',
        email: '',
        phonenumber: '',
        sex: '0',
        deptId: 100, // 默认部门ID
        remark: '',
        code: '', // 验证码
        uuid: '' // 验证码标识
      },
      sexOptions: [
        { value: '0', label: '男' },
        { value: '1', label: '女' },
        { value: '2', label: '未知' }
      ],
      loading: false,
      captchaImg: '' // 验证码图片
    }
  },
  onLoad() {
    this.getCaptcha()
  },
  methods: {
    handleSexChange(e) {
      this.registerForm.sex = this.sexOptions[e.detail.value].value
    },
    
    async getCaptcha() {
      try {
        const res = await request({
          url: '/captchaImage',
          method: 'get',
          headers: {
            isToken: false
          }
        })
        if (res.code === 200) {
          this.captchaImg = 'data:image/gif;base64,' + res.img
          this.registerForm.uuid = res.uuid
        } else {
          uni.showToast({
            title: '获取验证码失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取验证码错误:', error)
        uni.showToast({
          title: '获取验证码失败',
          icon: 'none'
        })
      }
    },
    
    validateForm() {
      if (!this.registerForm.username) {
        uni.showToast({
          title: '请输入账号',
          icon: 'none'
        })
        return false
      }
      if (this.registerForm.username.length < 2 || this.registerForm.username.length > 20) {
        uni.showToast({
          title: '账号长度必须在2到20个字符之间',
          icon: 'none'
        })
        return false
      }
      
      if (!this.registerForm.nickName) {
        uni.showToast({
          title: '请输入昵称',
          icon: 'none'
        })
        return false
      }
      
      if (!this.registerForm.email) {
        uni.showToast({
          title: '请输入邮箱',
          icon: 'none'
        })
        return false
      }
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!emailRegex.test(this.registerForm.email)) {
        uni.showToast({
          title: '请输入正确的邮箱地址',
          icon: 'none'
        })
        return false
      }
      
      if (!this.registerForm.phonenumber) {
        uni.showToast({
          title: '请输入手机号码',
          icon: 'none'
        })
        return false
      }
      const phoneRegex = /^1[3-9]\d{9}$/
      if (!phoneRegex.test(this.registerForm.phonenumber)) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return false
      }
      
      if (!this.registerForm.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return false
      }
      if (this.registerForm.password.length < 5 || this.registerForm.password.length > 20) {
        uni.showToast({
          title: '密码长度必须在5到20个字符之间',
          icon: 'none'
        })
        return false
      }
      
      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        })
        return false
      }

      if (!this.registerForm.code) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        })
        return false
      }
      
      return true
    },
    
    handleRegister() {
      if (!this.validateForm()) {
        return
      }
      
      this.loading = true
      // 移除确认密码字段，因为后端不需要
      const { confirmPassword, ...registerData } = this.registerForm
      
      request({
        url: '/register',
        method: 'post',
        data: registerData,
        headers: {
          isToken: false // 注册接口不需要token
        }
      }).then(res => {
        if (res.code === 200) {
          uni.showToast({
            title: '注册成功',
            icon: 'success'
          })
          setTimeout(() => {
            this.goToLogin()
          }, 1500)
        } else {
          uni.showToast({
            title: res.msg || '注册失败',
            icon: 'none'
          })
          // 注册失败时刷新验证码
          this.getCaptcha()
        }
      }).catch(error => {
        console.error('注册失败:', error)
        uni.showToast({
          title: '注册失败，请稍后重试',
          icon: 'none'
        })
        // 注册失败时刷新验证码
        this.getCaptcha()
      }).finally(() => {
        this.loading = false
      })
    },
    
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
  }
}
</script>

<style lang="scss">
.register-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #e6f3ff 0%, #f0f7ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.register-content {
  width: 100%;
  max-width: 750rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.05);
  padding: 60rpx 40rpx;
  box-sizing: border-box;
}

.register-form {
  width: 100%;
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 60rpx;
    color: #2c3e50;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  }
  
  .form-item {
    margin-bottom: 30rpx;
    background-color: #f8fafc;
    border-radius: 16rpx;
    padding: 24rpx;
    border: 2rpx solid #e8f0fe;
    transition: all 0.3s ease;
    
    &:focus-within {
      border-color: #007AFF;
      box-shadow: 0 0 0 2rpx rgba(0, 122, 255, 0.1);
    }
    
    input, .picker {
      width: 100%;
      height: 80rpx;
      font-size: 28rpx;
      color: #2c3e50;
      
      &::placeholder {
        color: #95a5a6;
      }
    }
    
    .picker {
      line-height: 80rpx;
    }
  }
  
  .captcha-group {
    display: flex;
    align-items: center;
    gap: 20rpx;
    
    .captcha-input {
      flex: 1;
    }
    
    .captcha-img {
      width: 200rpx;
      height: 80rpx;
      border-radius: 8rpx;
      background: #fff;
    }
  }
  
  .register-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #007AFF 0%, #0056b3 100%);
    border-radius: 44rpx;
    color: #fff;
    font-size: 32rpx;
    margin-top: 60rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
    transition: all 0.3s ease;
    
    &[loading] {
      opacity: 0.8;
    }
    
    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 6rpx rgba(0, 122, 255, 0.2);
    }
  }
  
  .login-link {
    text-align: center;
    font-size: 28rpx;
    color: #007AFF;
    margin-top: 30rpx;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    
    &:active {
      opacity: 0.7;
    }
  }
}
</style> 